<template>
  <view class="container">
    <!-- 顶部导航栏：暖色调标题+柔和返回键 -->
    <view class="navbar">
      <view class="navbar-back" @click="back">
        <text class="back-icon">←</text>
      </view>
      <text class="navbar-title">我的情绪小窝</text> <!-- 文案更温暖 -->
      <view class="navbar-empty"></view>
    </view>
    
    <!-- 统计概览：暖色系卡片+柔和图标 -->
    <view class="stats-container">
      <view class="stat-card" v-for="(stat, index) in stats" :key="index">
        <view class="stat-icon" :style="{ backgroundColor: stat.color }">
          <text class="icon-symbol">{{ stat.symbol }}</text>
        </view>
        <text class="stat-value">{{ stat.value }}</text>
        <text class="stat-label">{{ stat.label }}</text>
      </view>
    </view>
    
    <!-- 情绪记录：暖白卡片+柔和边框 -->
    <view class="emotion-container">
      <view class="emotion-header">
        <text class="emotion-title">情绪小历程</text> <!-- 文案优化 -->
        <view class="filter-options">
          <button class="filter-btn" :class="{ active: filter === 'all' }" @click="filter = 'all'">全部</button>
          <button class="filter-btn" :class="{ active: filter === 'week' }" @click="filter = 'week'">本周</button>
          <button class="filter-btn" :class="{ active: filter === 'month' }" @click="filter = 'month'">本月</button>
        </view>
      </view>
      
      <!-- 空状态：治愈图标+温暖引导文案 -->
      <view class="empty-state" v-if="filteredEmotions.length === 0">
        <image src="/static/images/empty_emotion_warm.png" mode="widthFix" class="empty-img"></image> <!-- 替换为暖感空状态图 -->
        <text class="empty-title">还没有情绪记录呢</text>
        <text class="empty-desc">记录每一刻心情，慢慢认识自己吧～</text> <!-- 文案更治愈 -->
        <button class="add-btn" @click="$navigateTo('/pages/emotion-select/EmotionSelect')">
          记录今日心情
        </button>
      </view>
      
      <!-- 网格布局：暖白卡片+情绪色强调 -->
      <view class="emotion-grid" v-else>
        <view v-for="(group, date) in emotionGroups" :key="date">
          <text class="group-date">{{ formatGroupDate(date) }}</text>
          <view class="card-list">
            <view 
              class="emotion-card" 
              v-for="(emotion, index) in group" 
              :key="index"
              :style="{ borderLeft: `8rpx solid ${emotion.color}` }"
            >
              <view class="emotion-icon" :style="{ backgroundColor: `${emotion.color}20` }">
                <text class="icon">{{ emotion.icon }}</text>
              </view>
              <view class="emotion-details">
                <view class="detail-top">
                  <text class="emotion-name">{{ emotion.name }}</text>
                  <text class="emotion-time">{{ formatTime(emotion.date) }}</text>
                </view>
                <text class="emotion-note" v-if="emotion.note">{{ emotion.note }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部添加按钮：暖橙底色+柔和阴影 -->
    <button class="fab-button" @click="$navigateTo('/pages/emotion-select/EmotionSelect')">
      <text class="fab-icon">+</text>
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      emotions: [
        { id: 1, name: "开心", icon: "🥰", color: "#FFB84D", date: "2023-10-15 08:30:00", note: "今天收到了一份惊喜礼物" }, // 暖橙+可爱表情
        { id: 2, name: "平静", icon: "😌", color: "#87CEEB", date: "2023-10-15 14:20:00" },
        { id: 3, name: "疲惫", icon: "😣", color: "#D3C5E5", date: "2023-10-14 22:10:00", note: "加班到很晚，感觉很累" }, // 暖紫替代冷灰
        { id: 4, name: "生气", icon: "😤", color: "#FF8A80", date: "2023-10-13 16:45:00" }, // 暖红替代冷红
        { id: 5, name: "难过", icon: "🥺", color: "#A7C7E7", date: "2023-10-12 10:15:00", note: "计划好的事情被取消了" }, // 暖蓝替代冷蓝
        { id: 6, name: "惊喜", icon: "😍", color: "#FF9EBB", date: "2023-10-10 11:30:00" } // 暖粉替代冷粉
      ],
      filter: "all"
    };
  },
  computed: {
    // 统计数据：暖色系配色
    stats() {
      return [
        { label: "总记录", value: this.emotions.length, symbol: "📝", color: "#FFE5D9" }, // 暖粉底
        { label: "本月", value: this.emotions.filter(e => this.isThisMonth(e.date)).length, symbol: "🗓️", color: "#E8F5E9" }, // 暖绿底
        { label: "最频繁", value: this.getMostFrequentEmotion(), symbol: "⭐", color: "#FFF3E0" } // 暖橙底
      ];
    },
    filteredEmotions() {
      switch (this.filter) {
        case "week":
          return this.emotions.filter(e => this.isThisWeek(e.date)).sort((a, b) => new Date(b.date) - new Date(a.date));
        case "month":
          return this.emotions.filter(e => this.isThisMonth(e.date)).sort((a, b) => new Date(b.date) - new Date(a.date));
        default:
          return [...this.emotions].sort((a, b) => new Date(b.date) - new Date(a.date));
      }
    },
    emotionGroups() {
      return this.filteredEmotions.reduce((groups, emotion) => {
        const dateKey = new Date(emotion.date).toISOString().split('T')[0];
        if (!groups[dateKey]) {
          groups[dateKey] = [];
        }
        groups[dateKey].push(emotion);
        return groups;
      }, {});
    }
  },
  methods: {
    back() {
      uni.switchTab({ url: "/pages/myHome/myHome" });
    },
    isThisWeek(dateString) {
      const date = new Date(dateString);
      const now = new Date();
      const firstDayOfWeek = new Date(now.setDate(now.getDate() - now.getDay()));
      return date >= firstDayOfWeek;
    },
    isThisMonth(dateString) {
      const date = new Date(dateString);
      const now = new Date();
      return date.getMonth() === now.getMonth() && date.getFullYear() === now.getFullYear();
    },
    getMostFrequentEmotion() {
      if (this.emotions.length === 0) return "无";
      const counts = {};
      this.emotions.forEach(e => counts[e.name] = (counts[e.name] || 0) + 1);
      let maxCount = 0, mostFrequent = "";
      for (const [name, count] of Object.entries(counts)) {
        if (count > maxCount) { maxCount = count; mostFrequent = name; }
      }
      return mostFrequent;
    },
    formatGroupDate(dateKey) {
      const date = new Date(dateKey);
      return date.toLocaleDateString("zh-CN", { year: "numeric", month: "long", day: "numeric", weekday: "long" });
    },
    formatTime(dateString) {
      const date = new Date(dateString);
      return date.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
    }
  },
  onLoad() {
    // 实际项目中从数据库获取数据
    // this.emotions = await db.collection('emotion_records').get();
  }
};
</script>

<style scoped>
/* 容器：暖米色背景，替代纯白 */
.container {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background: #FFF9F5; /* 暖米色背景，柔和不刺眼 */
}

/* 导航栏：暖灰标题+轻微阴影 */
.navbar {
  height: 140rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05); /* 轻微阴影，增加层次感 */
}
.navbar-back, .navbar-empty {
  width: 40rpx;
}
.back-icon {
  font-size: 36rpx;
  color: #FF8A65; /* 暖橙返回键，增加温暖感 */
}
.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #5D4037; /* 暖棕色标题，替代纯黑 */
}

/* 统计概览：暖白卡片+柔和阴影 */
.stats-container {
  display: flex;
  gap: 20rpx;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 30rpx; /* 更大圆角，更柔和 */
  background: #fff;
  box-shadow: 0 5rpx 15rpx rgba(0,0,0,0.03); /* 轻微阴影，避免扁平感 */
}
.stat-card {
  flex: 1;
  text-align: center;
  padding: 25rpx 0;
}
.stat-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20rpx;
}
.icon-symbol {
  font-size: 40rpx;
  color: #5D4037;
}
.stat-value {
  display: block;
  font-size: 38rpx;
  font-weight: 700;
  color: #5D4037;
  margin-bottom: 8rpx;
}
.stat-label {
  font-size: 24rpx;
  color: #8D6E63; /* 暖棕灰标签，替代冷灰 */
}

/* 情绪历程区域：暖色调标题 */
.emotion-container {
  padding: 0 20rpx;
  margin-top: 10rpx;
}
.emotion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 10rpx;
  margin-bottom: 10rpx;
}
.emotion-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #5D4037;
}
/* 筛选按钮：暖灰边框+点击暖橙 */
.filter-options {
  display: flex;
  gap: 15rpx;
}
.filter-btn {
  padding: 10rpx 25rpx;
  font-size: 24rpx;
  border-radius: 24rpx;
  border: 2rpx solid #D7CCC8; /* 暖灰边框 */
  background: transparent;
  color: #8D6E63;
  transition: all 0.3s; /* 柔和过渡 */
}
.filter-btn.active {
  background: #FF8A65; /* 暖橙激活色 */
  border-color: #FF8A65;
  color: #fff;
}

/* 空状态：柔和图标+暖色调文案 */
.empty-state {
  text-align: center;
  padding: 120rpx 0 80rpx;
}
.empty-img {
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 40rpx;
  opacity: 0.8; /* 更高透明度，更柔和 */
}
.empty-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #5D4037;
  margin-bottom: 15rpx;
}
.empty-desc {
  display: block;
  font-size: 24rpx;
  color: #8D6E63;
  margin-bottom: 50rpx;
}

/* 网格布局：暖白卡片+柔和阴影 */
.emotion-grid {
  margin-top: 20rpx;
}
.group-date {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: #8D6E63;
  margin: 30rpx 0 15rpx;
}
.card-list {
  display: flex;
  gap: 20rpx;
  padding-bottom: 10rpx;
  overflow-x: auto;
}
/* 情绪卡片：暖白底色+轻微阴影 */
.emotion-card {
  flex: 0 0 420rpx;
  display: flex;
  background: #fff;
  border-radius: 30rpx; /* 更大圆角 */
  padding: 30rpx;
  box-shadow: 0 5rpx 15rpx rgba(0,0,0,0.03); /* 轻微阴影 */
}
.emotion-icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
}
.icon {
  font-size: 44rpx;
}
.emotion-details {
  flex: 1;
}
.detail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}
.emotion-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #5D4037;
}
.emotion-time {
  font-size: 22rpx;
  color: #8D6E63;
}
.emotion-note {
  font-size: 26rpx;
  color: #6D4C41; /* 暖棕文案，替代冷灰 */
  line-height: 1.6;
  padding-top: 5rpx;
}

/* 底部添加按钮：暖橙底色+柔和阴影+点击反馈 */
.fab-button {
  position: fixed;
  right: 40rpx;
  bottom: 60rpx;
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #FF8A65; /* 暖橙底色，替代纯黑 */
  color: #fff;
  box-shadow: 0 8rpx 20rpx rgba(255,138,101,0.3); /* 暖橙阴影，增加温暖感 */
  transition: background 0.3s; /* 柔和过渡 */
}
.fab-button:active {
  background: #FF6E40; /* 点击加深暖橙，反馈更明显 */
}
.fab-icon {
  font-size: 56rpx;
  line-height: 1;
}
/* 添加按钮：同底部按钮风格 */
.add-btn {
  padding: 22rpx 70rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  border: none;
  background: #FF8A65;
  color: #fff;
  box-shadow: 0 5rpx 15rpx rgba(255,138,101,0.2);
  transition: background 0.3s;
}
.add-btn:active {
  background: #FF6E40;
}
</style>